<template>
    <div class="myCollect" v-if="showPage">
      <div class="myCollect-header">
        <div :class="active===3 ? 'active':''" ﻿@tap="changeTab(3)">
          <img src="/static/img/collectAll.png" alt="">
          <p>全部</p>
        </div>
        <div :class="active===1 ? 'active':''" ﻿@tap="changeTab(1)">
          <img src="/static/img/collectProject.png" alt="">
          <p>项目</p>
        </div>
        <div :class="active===2 ? 'active':''" ﻿@tap="changeTab(2)">
          <img src="/static/img/collectPost.png" alt="">
          <p>帖子</p>
        </div>
      </div>
      <div>
        <collectProject v-for="(item,index) in list" :key="index" :collectItem="item" @delCollect="delCollect"></collectProject>
      </div>
      <bottoms info="暂无收藏信息" ></bottoms>
    </div>
</template>

<script>
  import collectProject from "@/components/collectProject/index"
  import bottoms from '@/components/reachBottom/index'
    export default {
        name: "collect",
      components:{
        collectProject,
        bottoms
      },
      data(){
          return{
            showPage: true,
            active: 3,
            collect:true,
            list:[],
            totalPage: 1,
            currentPage: 1,
            loadingEnd:{
              moduleOne: false,
            }
          }
      },
      methods: {
        changeTab(type){
          this.active = type;
          this.viewLoad();
        },
        getList() {
          let info = {
            page_size: 10,
            page: this.currentPage,
            type: this.active
          }
          this.$ajax
            .post(this.$api.getMemberCollectList, info)
            .then(res => {
              this.list.push(...res.data);
              this.loadingEnd.moduleOne = true
              this.totalPage = res.total_page
              if(res.total_count === 0){
                this.$store.dispatch("changeIsEmpty", true);
              } else {
                this.$store.dispatch("changeIsEmpty", false);
              }
            })
            .catch(err => {
              this.loadingEnd.moduleOne = true
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        },
        delCollect(id, type){
          let num = null;
          if(type === 1){
            num = this.list.findIndex((item) => {
              return (parseInt(item.item_id) === parseInt(id) && parseInt(item.type) === parseInt(type))
            })
          } else {
            num = this.list.findIndex((item) => {
              return (parseInt(item.posts_id) === parseInt(id) && parseInt(item.type) === parseInt(type))
            })
          }
          this.list.splice(num,1)
          if(this.list.length === 0){
            this.viewLoad()
          }
        },
        viewLoad(){
          this.list =[];
          this.currentPage=1;
          this.loadingEnd.moduleOne = false;
          this.$store.dispatch("changeIsMore", false);
          this.$store.dispatch("changeIsEnd", false);
          this.$store.dispatch("changeIsEmpty", false);
          ﻿uni.showLoading({
            title: '加载中',
            mask: true
          });
          this.getList()
        }
      },
      onPullDownRefresh(){
        this.viewLoad()
        ﻿uni.stopPullDownRefresh() //停止下拉刷新
      },
      onReachBottom(){
        if(this.totalPage > this.currentPage){
          this.$store.dispatch("changeIsMore", true);
          this.$store.dispatch("changeIsEnd", false);
          this.currentPage++
          this.getList();
        } else {
          this.$store.dispatch("changeIsEnd", true);
          this.$store.dispatch("changeIsMore", false);
        }
      },
      computed:{
        hideLoading(){
          if(this.loadingEnd.moduleOne){
            setTimeout(function(){
              ﻿uni.hideLoading()
            }, 800)
          }
        }
      },
      onHide(){
        this.showPage= false;
      },
      onShow(){
        this.showPage= true;
        this.viewLoad();
      },
    }
</script>

<style scoped>

.myCollect{
  padding: 34rpx 30rpx 30rpx;
  box-sizing: border-box;
}
  .myCollect-header{
    padding: 0 102rpx 34rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom: 14rpx solid #F7F7F7;
  }
.myCollect-header>div{
  text-align: center;
}
.myCollect-header>div>img{
  width: 68rpx;
  height: 68rpx;
}
.myCollect-header>.active>img{
  width: 78rpx;
  height: 78rpx;
}
.myCollect-header>div>p{
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #323232;
  font-weight: bold;
  line-height: 29rpx;
}
.myCollect-header>.active>p{
  color: #EF5A56;
}
</style>
